// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.bar {
  @_top: bar;
  --fill: 0%;
  display: block;
  width: 100%;
  background-color: @yellow;
  height: @bar-size;
  position: relative;

  &--beatmap-rating {
    height: 5px;
    background-color: @green;
  }

  &--beatmap-stats {
    height: 5px;
    background-color: @osu-colour-b6;
  }

  &--beatmap-success-rate {
    height: 5px;
    background-color: @osu-colour-b6;
    margin-top: 5px;
    margin-bottom: calc(1em + 2px);
  }

  &--double {
    height: (@bar-size * 2);
  }

  &--forum-poll {
    background-color: @osu-colour-b3;
    border-radius: 10000px;
    height: 6px;
  }

  &--locale {
    background-color: @purple;
  }

  &--user-profile {
    border-radius: 10000px;
    height: 6px;
    background-color: @osu-colour-b6;
  }

  &__fill {
    height: 100%;
    width: var(--fill);

    .@{_top}--beatmap-rating & {
      background-color: @yellow-dark;
    }

    .@{_top}--beatmap-stats & {
      .default-bar-transition();
      background-color: #fff;
    }

    .@{_top}--beatmap-stats-stars & {
      background-color: @yellow;
    }

    .@{_top}--beatmap-success-rate & {
      .default-bar-transition();
      background-color: @green;
    }

    .@{_top}--forum-poll & {
      background-color: @osu-colour-h1;
      border-radius: 10000px;
      opacity: 0.5;
    }

    // must be after --forum-poll
    .@{_top}--forum-poll-voted & {
      opacity: 1;
    }

    .@{_top}--user-profile & {
      border-radius: 10000px;
      background-color: @osu-colour-h1;
    }
  }

  &__text {
    position: absolute;
    top: 100%;
    margin-top: 2px;

    .@{_top}--beatmap-success-rate & {
      margin-left: var(--fill);
      transform: translateX(-50%);
    }

    .@{_top}--user-profile & {
      right: 0;
    }
  }
}
